<template>
	<view class="order_box">
		<!-- head区域 -->
		<view class="head">
			<view class="useraddress" >
				<view class="addressinfo" v-if="localBuffer"  hover-class="touchOpacity" @click="addressAdd">
					<text space="ensp" class="addressinfo_top">{{address.username}}   {{address.userphone}}</text>
					<view class="addressinfo_bottom">
						<!-- <uni-tag  size="small" type="error" :inverted="true" :circle="true" text="默认"></uni-tag>
						<uni-tag  size="small" type="error" :inverted="true" :circle="true" text="默认"></uni-tag> -->
						<text class="addressinfo_bottom_status" v-if="address.status ==1">默认</text>
						<text class="addressinfo_bottom_label" v-if="address.label != '' ">{{address.label}}</text>
						<text class="addressinfo_bottom_useraddress">{{address.location+address.useraddress}}</text>
					</view>
				</view>
				<view class="addressinfo" v-else>
					<u-button type="warning" :plain="true" @click="addressAdd">+点击完善收货地址</u-button>
				</view>
			</view>
		</view>
		
		<view class="order_ticket">
			<image src="../../static/icon/index/kingkong/selfsupport.png"></image>
			<text>品牌精选</text>
			<text>以免运费 |</text>
			<text>领券</text>
		</view>
		<!-- 商品信息区域 -->
		<view class="order_view">
			<!-- 明日来写购物车基本信息 -->
			<view 
				class="cartInfochild" 
				v-for="(item,index) in orders"
				:key="item.id"
			>
				<!-- 图片 -->
				<image :src="item.img" class="cartInfo_image"></image>
				<!-- 信息 -->
				<view class="cartInfo_info">
					<text>{{item.goodsname}}</text>
					<text>￥
						<text style="font-size: 40rpx;color:#FF6040;">{{item.price}}</text>
					</text>
					<text >七天无理由退货</text>
				</view>
				<!-- 加减数量 -->
				<view class="cartInfo_num">
					<label> ×{{item.num}}</label>
				</view>
			</view>
		</view>
		
		<!-- 具体详细1 -->
		<view class="resDetail">
			<view hover-class="touchOpacity">
				<label for="" class="resDetail_title">发票类型</label>
				<label for="" style="margin-right:40rpx;color:#333333;font-size: 24rpx;">不开发票 ></label>
			</view>
			<view class="">
				<label for="" class="resDetail_title">售后免邮</label>
				<label for="" style="margin-right:40rpx;color:#666666;font-size: 24rpx;">部分商家赠送</label>
			</view>
			<view class="" >
				<label for="" class="resDetail_title">卖家留言</label>
				<label for="" style="margin-right:40rpx;color:#666666;font-size: 24rpx;">填写内容需要与商家协商并确认，45字以内</label>
			</view>
		</view>
		
		<!-- 具体详细2 -->
		<view class="resDetail" style="margin:10rpx 0 98rpx;">
			<view class="">
				<label for="" class="resDetail_title">商品金额</label>
				<label for="" style="margin-right:40rpx;color:#333333;font-size: 24rpx;">￥200</label>
			</view>
			<view class="">
				<label for="" class="resDetail_title">优惠活动</label>
				<label for="" style="margin-right:40rpx;color:#FF6040;font-size: 24rpx;">-￥200</label>
			</view>
			<view hover-class="touchOpacity">
				<label for="" class="resDetail_title">优惠券</label>
				<label for="" style="margin-right:40rpx;color:#666666;font-size: 24rpx;">更多优惠券 ></label>
			</view>
		</view>
		<!-- 确认订单按钮 -->
		<view class="foot">
			<view class="foot_left">
				<text class="foot_left_count" space="ensp">合计<text>￥{{countmoney}}</text></text>
				<text class="foot_left_ticket" space="ensp">已免运费   <text>已优惠￥100</text></text>
			</view>
			<view class="foot_right" hover-class="touchOpacity" @click="topay" >确认订单</view>
		</view>
	
	</view>
</template>

<script>

	export default {
		data() {
			return {
				orders:[],
				idstr:"",
				countmoney:0,
				countnumber:0,
				address:{},//初始化收货地址
				localBuffer:true,//初始化收货地址开关
			}
		},
		onLoad(option){
			this.renderorder()
			
			
			if(!this.$mp.query.address){
				this.addresslist()
				return
			}else{
				this.localBuffer=true
				this.address=JSON.parse(this.$mp.query.address)
			}
			
		},
		onBackPress(e){
			if(e.from="backbutton"){
				uni.switchTab({
					url:"/pages/cart/cart"
				})
				
				return true
			}
			
		},
		methods: {
			// 跳转到地址列表 
			addressAdd(){
				uni.navigateTo({
					url:"/pages/address/address"
				})
			},
			 // http://localhost:3000/api/addresslist 查询地址
			 async addresslist(){
				 let {token,uid}=uni.getStorageSync("userinfo")
				 let [err,res]=await uni.request({
					 url:this.$baseUrl+"/api/addresslist",
					 header:{
						 authorization:token
					 },
					 data:{
						 uid,
						 status:1
					 }
				 })
				
				 if(err){
				 	 uni.showToast({
				 			title:"出错了",
				 			icon:"error"
				 		 })
				  return
				 }
				 if(res.data.code==403){
				 		uni.showToast({
				 		title:"登录过期",
				 		icon:"error"
				 	 })
				  setTimeout(()=>{
				 	 uni.navigateTo({
				 			 url:"/pages/login/login"
				 		  })
				 					 						 
				 	 },1000)
				 					 
				 	 return
				 					 
				 }
				 if(res.data.code !=200){
				 	 uni.showToast({
				 			title:"出错了",
				 			icon:"error"
				 		 })
				 					 
				 	 return
				 }
				if(!res.data.list){
					this.localBuffer=false
					return
				}
				 this.localBuffer=true
				  console.log(res);
				  this.address=res.data.list[0]
				  
				 
			 },
			
			// 确认订单  http://localhost:3000/api/orderadd
			async topay(){
				
				let {token,uid}=uni.getStorageSync("userinfo")
				let addressid= this.address.id
				
				let [err,res]= await uni.request({
					url:this.$baseUrl+"/api/orderadd",
					method:"POST",
					header:{
						authorization:token
					},
					data:{
						
						uid,
						addressid,
						idstr:this.idstr,
						countmoney:this.countmoney,
						countnumber:this.countnumber
					
					}
				})
				// console.log(res);
				
				if(err){
					 uni.showToast({
							title:"出错了",
							icon:"error"
						 })
				 return
				}
				if(res.data.code==403){
						uni.showToast({
						title:"登录过期",
						icon:"error"
					 })
				 setTimeout(()=>{
					 uni.navigateTo({
							 url:"/pages/login/login"
						  })
									 						 
					 },1000)
									 
					 return
									 
				}
				if(res.data.code !=200){
					 uni.showToast({
							title:"出错了",
							icon:"error"
						 })
									 
					 return
				}
				
				
				uni.navigateTo({
					url:`/pages/pay/pay?countmoney=${this.countmoney}&outTradeNo=${res.data.list.outTradeNo}`
				})
				
			},
			// 渲染订单页
			renderorder(){
				let {newcartlist,allPrice,allNum} = uni.getStorageSync("orderlist")
				this.orders=newcartlist
				this.countmoney=allPrice
				this.countnumber=allNum
				
				// map 把符合的返回 一个新数组
				let idarr = this.orders.map(item=>{
					return item.id
				})
				this.idstr=idarr.join()
				
			},
		}
	}
</script>

<style scoped>
	/* 引入样式 */
	@import url("@/static/css/order.css");
</style>
